<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :before-close="crud.cancelCU"
    :visible="crud.status.cu > 0"
    :title="crud.status.title"
    width="60%"
  >
          <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="66px">
            <div style="background-color:#A7C9F1;height:30px;margin-bottom:20px;color:#fff;padding:6px">
              <span>基本信息</span>
            </div>
            <div>
            <el-form-item label="姓名" prop="name" label-width="100px">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="性别" label-width="100px">
              <el-radio-group v-model="form.sex" style="width: 178px">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄" prop="age" label-width="100px">
              <el-input v-model.number="form.age" />
            </el-form-item>
            </div>
            <div>
            <el-form-item label="手机号码" prop="phone" label-width="100px">
              <el-input v-model.number="form.phone" />
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday" label-width="100px">
         <el-date-picker
          v-model="form.birthday"
          type="date"
          size="small"
          class="filter-item charges-date-picker"
          placeholder="出生日期"
          value-format="yyyy-MM-dd"
          style="width: 178px"
        >
        </el-date-picker>
      </el-form-item>
            <el-form-item label="身份证号" prop="idCard" label-width="100px">
              <el-input v-model="form.idCard" />
            </el-form-item>
            </div>
<div>
            <el-form-item label="家庭住址" prop="address" label-width="100px">
              <el-input v-model="form.address" />
            </el-form-item>
             <el-form-item label="患者来源" prop="source" label-width="100px">
              <el-select v-model="form.source" style="width: 178px" placeholder="患者来源">
                <!-- <el-option
                  v-for="(item, index) in jobs"
                  :key="item.name + index"
                  :label="item.name"
                  :value="item"
                /> -->
              </el-select>
            </el-form-item>
</div>

 <div style="background-color:#A7C9F1;height:30px;margin-bottom:20px;color:#fff;padding:6px">
              <span>其他信息</span>
            </div>

          <div>
             <el-form-item label="婚姻状况" prop="membershipType" label-width="100px">
              <el-select v-model="form.membershipType" style="width: 178px" placeholder="婚姻状况">
                <!-- <el-option
                  v-for="(item, index) in jobs"
                  :key="item.name + index"
                  :label="item.name"
                  :value="item"
                /> -->
              </el-select>
            </el-form-item>

            <el-form-item label="民族" prop="nation" label-width="100px">
              <el-select v-model="form.nation" style="width: 178px" placeholder="请选择">
                <!-- <el-option
                  v-for="(item, index) in jobs"
                  :key="item.name + index"
                  :label="item.name"
                  :value="item"
                /> -->
              </el-select>
            </el-form-item>
            <el-form-item label="会员类型" prop="membershipType" label-width="100px">
              <span style="color:#DC143C">【请前往会员中心设置】</span>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="微信号" prop="wechat" label-width="100px">
              <el-input v-model="form.wechat" />
            </el-form-item>
 <el-form-item label="职业" prop="occupation" label-width="100px">
              <el-select v-model="form.occupation" style="width: 178px" placeholder="请选择">
                <!-- <el-option
                  v-for="(item, index) in jobs"
                  :key="item.name + index"
                  :label="item.name"
                  :value="item"
                /> -->
              </el-select>
            </el-form-item>
            <el-form-item label="工作单位" prop="workUnit" label-width="100px">
              <el-input v-model="form.workUnit" />
            </el-form-item>
          </div>

          <div>
            <el-form-item label="慢性病" label-width="100px">
              <el-radio-group v-model="form.isChronicDisease" style="width: 178px">
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-form-item> 

            <el-form-item label="慢性病史" prop="illness" label-width="100px">
              <el-input v-model="form.illness" />
            </el-form-item>

            <el-form-item label="备注" prop="remark" label-width="100px">
              <el-input v-model="form.remark" />
            </el-form-item>
          </div>

          </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="text"
        @click="crud.cancelCU"
      >
        取消
      </el-button>
      <el-button
        type="primary"
        @click="onClickSumbit"
      >
        确认
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import CRUD, { form } from '@crud/crud'
import { add } from '@/api/outpatientService/outuser'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

const defaultForm = {
  id: null,
  name: '',
  sort: 999,
  enabled: true,
  dept: {
    id: 1
  }
}
export default {
  components: { Treeselect },
  mixins: [form(defaultForm)],
  props: {
    userData:{
      type :Object,
      required:false
    }
    // jobStatus: {
    //   type: Array,
    //   required: true
    // }
  },
  data() {
    return {
  form : {	
  address: "",
	age: 30,
	birthday: null,
	createTime: "",
	id: null,
	idCard: "",
	illness: "",
	isChronicDisease: 1,
	maritalStatus: '',
	membershipType: "0",
	name: "",
	nation: "",
	occupation: "",
	pharmacyId: "",
	phone: "",
	remark: "",
	sex: 0,
	source: "",
	status: 0,
	wechat: "",
	workUnit: ""},
      depts: [],
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
        ],
        dept: { required: true, message: '所属部门不能为空', trigger: 'select' }
      }
    }
  },
  
  methods: {
    [CRUD.HOOK.beforeToCU]() {
      // getDepts({ enabled: true }).then(res => {
      //   this.depts = res.content
      // })
    },
    // 提交前的验证
    [CRUD.HOOK.afterValidateCU]() {
      if (!this.form.dept.id) {
        this.$notify({
          title: '所属部门不能为空',
          type: 'warning'
        })
        return false
      }
      return true
    },
    onClickSumbit(){


  add(this.form).then(res => {
        this.data = res;
        this.crud.toQuery();
      });
    },
  //   [CRUD.HOOK.submitCU]() {
  //     let form = {	address: "123456",
	// age: 30,
	// birthday: "2021-09-03",
	// createTime: "",
	// id: null,
	// idCard: "129403948593029336",
	// illness: "12345",
	// isChronicDisease: 1,
	// maritalStatus: true,
	// membershipType: "0",
	// name: "test",
	// nation: "汉",
	// occupation: "",
	// pharmacyId: "",
	// phone: "",
	// remark: "",
	// sex: 0,
	// source: "",
	// status: 0,
	// wechat: "",
	// workUnit: ""};

  // add(form).then(res => {
  //       this.data = res;
  //       this.crud.toQuery();
  //     });
  //     //  add(form).then(res => {
  //     //   // this.depts = res.content
  //     // })
  //     // getDepts({ enabled: true }).then(res => {
  //     //   this.depts = res.content
  //     // })
  //   },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
